<template>
  <div>
    <!-- 头部引入 -->
      <ShopHeader> </ShopHeader>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/shop/goods" replace>点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/ratings" replace>评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/info" replace>商家</router-link>
      </div>
    </div>
  
  <!-- 测试代码 -->
    <!-- <button @click='getShopGoods'>点击调用</button> -->
    <router-view />
  </div>
</template>

<script>

import {reqShopGoods}  from '../../api/index'


import {mapActions,mapState}from 'vuex'



import    ShopHeader  from '../../components/ShopHeader/ShopHeader'

// getShopInfo
//  getShopGoods
//  getShopRatings


export default {
  name: "",
  data() {
    return {
    
    };
  },

  components:{
    ShopHeader
  },
  
  mounted() {

    this.getShopInfo();
    // this.getShopGoods();
    // this.getShopRatings();

    

  },


  computed: {
    ...mapState(['info','goods','ratings'])
  },

  
  methods: {
    ...mapActions(['getShopInfo','getShopGoods','getShopRatings'])
    //  测试代码
    //   async  getShopGoods() {
    //      let result=  await reqShopGoods();
    //      console.log(result)
    // }
  },
};
</script>
<style scoped lang="stylus">
@import "../../common/stylus/mixins.styl"
.tab
    height 40px
    line-height 40px
    background #fff
    bottom-border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      float left
      width: 33.33333%
      text-align center
      font-size 14px
      color rgb(77, 85, 93)
      a
        display block
        position relative
        &.router-link-active
          color #02a774
          &::after
            content ''
            position absolute
            left 50%
            bottom 1px
            width 35px
            height 2px
            transform translateX(-50%)
            background #02a774

</style>

